{{ define "cms/topbar.html" }}
  <!--Start topbar header-->
  <header class="topbar-nav">
   <nav class="navbar navbar-expand fixed-top">
    <!-- 占位搜索框, 占页面上部的左边位置-->
    <ul class="navbar-nav mr-auto align-items-center">
      <li class="nav-item">
        <a class="nav-link toggle-menu" href="javascript:void(0);">
         <i class="icon-menu menu-icon"></i>
       </a>
      </li>
      <li class="nav-item">
        <form class="search-bar">
          <input type="text" class="form-control" placeholder="此功能未完成:(">
           <a href="javascript:void(0);"><i class="icon-magnifier"></i></a>
        </form>
      </li>
    </ul>
    <!-- end 占位搜索框 -->

    <ul class="navbar-nav align-items-center right-nav-link">
      <!--
      <li class="nav-item dropdown-lg">
        <a class="nav-link dropdown-toggle dropdown-toggle-nocaret waves-effect" data-toggle="dropdown" href="javascript:void();">
        <i class="fa fa-envelope-open-o"></i><span class="badge badge-danger badge-up">12</span></a>
        <div class="dropdown-menu dropdown-menu-right">
          <ul class="list-group list-group-flush">
           <li class="list-group-item d-flex justify-content-between align-items-center">
            You have 12 new messages
            <span class="badge badge-danger">12</span>
            </li>
            <li class="list-group-item">
            <a href="javaScript:void();">
             <div class="media">
               <div class="avatar"><img class="align-self-start mr-3" src="/static/images/avatars/avatar-5.png" alt="user avatar"></div>
              <div class="media-body">
              <h6 class="mt-0 msg-title">Jhon Deo</h6>
              <p class="msg-info">Lorem ipsum dolor sit amet...</p>
              <small>Today, 4:10 PM</small>
              </div>
            </div>
            </a>
            </li>
            <li class="list-group-item">
            <a href="javaScript:void();">
             <div class="media">
               <div class="avatar"><img class="align-self-start mr-3" src="/static/images/avatars/avatar-6.png" alt="user avatar"></div>
              <div class="media-body">
              <h6 class="mt-0 msg-title">Sara Jen</h6>
              <p class="msg-info">Lorem ipsum dolor sit amet...</p>
              <small>Yesterday, 8:30 AM</small>
              </div>
            </div>
            </a>
            </li>
            <li class="list-group-item">
            <a href="javaScript:void();">
             <div class="media">
               <div class="avatar"><img class="align-self-start mr-3" src="/static/images/avatars/avatar-7.png" alt="user avatar"></div>
              <div class="media-body">
              <h6 class="mt-0 msg-title">Dannish Josh</h6>
              <p class="msg-info">Lorem ipsum dolor sit amet...</p>
               <small>5/11/2018, 2:50 PM</small>
              </div>
            </div>
            </a>
            </li>
            <li class="list-group-item">
            <a href="javaScript:void();">
             <div class="media">
               <div class="avatar"><img class="align-self-start mr-3" src="/static/images/avatars/avatar-8.png" alt="user avatar"></div>
              <div class="media-body">
              <h6 class="mt-0 msg-title">Katrina Mccoy</h6>
              <p class="msg-info">Lorem ipsum dolor sit amet.</p>
              <small>1/11/2018, 2:50 PM</small>
              </div>
            </div>
            </a>
            </li>
            <li class="list-group-item text-center"><a href="javaScript:void();">See All Messages</a></li>
          </ul>
          </div>
      </li>

      <li class="nav-item dropdown-lg">
        <a class="nav-link dropdown-toggle dropdown-toggle-nocaret waves-effect" data-toggle="dropdown" href="javascript:void();">
        <i class="fa fa-bell-o"></i><span class="badge badge-info badge-up">14</span></a>
        <div class="dropdown-menu dropdown-menu-right">
          <ul class="list-group list-group-flush">
            <li class="list-group-item d-flex justify-content-between align-items-center">
            You have 14 Notifications
            <span class="badge badge-info">14</span>
            </li>
            <li class="list-group-item">
            <a href="javaScript:void();">
             <div class="media">
               <i class="zmdi zmdi-accounts fa-2x mr-3 text-info"></i>
              <div class="media-body">
              <h6 class="mt-0 msg-title">New Registered Users</h6>
              <p class="msg-info">Lorem ipsum dolor sit amet...</p>
              </div>
            </div>
            </a>
            </li>
            <li class="list-group-item">
            <a href="javaScript:void();">
             <div class="media">
               <i class="zmdi zmdi-coffee fa-2x mr-3 text-warning"></i>
              <div class="media-body">
              <h6 class="mt-0 msg-title">New Received Orders</h6>
              <p class="msg-info">Lorem ipsum dolor sit amet...</p>
              </div>
            </div>
            </a>
            </li>
            <li class="list-group-item">
            <a href="javaScript:void();">
             <div class="media">
               <i class="zmdi zmdi-notifications-active fa-2x mr-3 text-danger"></i>
              <div class="media-body">
              <h6 class="mt-0 msg-title">New Updates</h6>
              <p class="msg-info">Lorem ipsum dolor sit amet...</p>
              </div>
            </div>
            </a>
            </li>
            <li class="list-group-item text-center"><a href="javaScript:void();">See All Notifications</a></li>
          </ul>
        </div>
      </li>

      <li class="nav-item language">
        <a class="nav-link dropdown-toggle dropdown-toggle-nocaret waves-effect" data-toggle="dropdown" href="javascript:void();"><i class="fa fa-flag"></i></a>
        <ul class="dropdown-menu dropdown-menu-right">
            <li class="dropdown-item"> <i class="flag-icon flag-icon-gb mr-2"></i> English</li>
            <li class="dropdown-item"> <i class="flag-icon flag-icon-fr mr-2"></i> French</li>
            <li class="dropdown-item"> <i class="flag-icon flag-icon-cn mr-2"></i> Chinese</li>
            <li class="dropdown-item"> <i class="flag-icon flag-icon-de mr-2"></i> German</li>
          </ul>
      </li>
      -->
      <li class="nav-item">
        <a class="nav-link dropdown-toggle dropdown-toggle-nocaret" data-toggle="dropdown" href="#">
          <span class="user-profile"><img src="/static/images/这是头像.bmp" class="img-circle" alt="user avatar"></span>
        </a>
        <ul class="dropdown-menu dropdown-menu-right">
          <li class="dropdown-divider"></li>
          <li class="dropdown-item"><a href="/cms/logout.html"><i class="icon-envelope mr-2"></i> 注销</a></li>
          <!--
          <li class="dropdown-item user-details">
          <a href="javaScript:void();">
             <div class="media">
               <div class="avatar"><img class="align-self-start mr-3" src="/static/images/avatars/avatar-13.png" alt="user avatar"></div>
              <div class="media-body">
              <h6 class="mt-2 user-title">Sarajhon Mccoy</h6>
              <p class="user-subtitle">mccoy@example.com</p>
              </div>
             </div>
            </a>
          </li>
          <li class="dropdown-divider"></li>
          <li class="dropdown-item"><i class="icon-envelope mr-2"></i> Inbox</li>
          <li class="dropdown-divider"></li>
          <li class="dropdown-item"><i class="icon-wallet mr-2"></i> Account</li>
          <li class="dropdown-divider"></li>
          <li class="dropdown-item"><i class="icon-settings mr-2"></i> Setting</li>
          <li class="dropdown-divider"></li>
          <li class="dropdown-item"><i class="icon-power mr-2"></i> Logout</li>
        -->
        </ul>
      </li>
    </ul>
  </nav>
  </header>
  <!--End topbar header-->
{{ end }}